<template>
  <div class="pages" ref="contentScroll">
    <div class="scroll">
      <el-timeline>
        <el-timeline-item timestamp="第一步" placement="top" size= 'large' color="#C6E2FF">
          <el-card>
             <el-row>
              <el-col :span="24">
                <p class="seatText">选择座位区域(框选或点选)</p>
              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="第二步" placement="top" size= 'large' color="#C6E2FF">
          <el-card>
            <div slot="header">
                <span>选择座位类型</span>
            </div>
            <el-row>
              <el-col :span="11">
                <div class="seatButton" @click="markSeats('best')">最佳体验<img class="seat-demo" src="@/assets/images/best.png"/></div>
              </el-col>
              <el-col :span="2">
                &nbsp;
              </el-col>
              <el-col :span="11">
                <div  class="seatButton" @click="markSeats('good')">优质体验<img class="seat-demo" src="@/assets/images/good.png"/></div>
              </el-col>
            </el-row>
            <el-row style="margin-top:20px">
              <el-col :span="11">
                <div class="seatButton" @click="markSeats('normal')">正常体验<img class="seat-demo" src="@/assets/images/normal.png"/></div>
              </el-col>
              <el-col :span="2">
                &nbsp;
              </el-col>
              <el-col :span="11">
                <div  class="seatButton" @click="markSeats('bad')">普通体验<img class="seat-demo" src="@/assets/images/bad.png"/></div>
              </el-col>
            </el-row>
            <el-row style="margin-top:20px">
              <el-col :span="11">
                <div class="seatButton" @click="markSeats('road')">
                  <p class="seatText">过道</p>
                </div>
              </el-col>
              <el-col :span="2">
                &nbsp;
              </el-col>
              <el-col :span="11">

              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="第三步" placement="top" size= 'large' color="#C6E2FF">
          <el-card>
            <el-row>
              <el-col :span="12">
                <el-popover
                  placement="top"
                  width="160"
                  v-model="visible">
                  <p>确认清空所有的座位吗？(已编辑的座位也会清除)</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="clearSeat()">确定</el-button>
                  </div>
                  <el-button slot="reference" size="small" round type="danger">重置座位</el-button>
                </el-popover>
              </el-col>
              <el-col :span="12">
                <el-popover
                  placement="top"
                  width="160"
                  v-model="visible2">
                  <p>确认不再修改吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="confirm()">确定</el-button>
                  </div>
                  <el-button :loading="confirmButtonLoading" slot="reference" size="small" round type="primary">确认完成</el-button>
                </el-popover>
              </el-col>
            </el-row>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
// import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
  name: 'ControllerAside',
  components: {},
  data () {
    return {
      visible: false,
      visible2: false, // 隐藏弹出的提示框
      templeteName: null,
      templetePrice: null
    }
  },
  watch: {
  },
  computed: {
  },
  methods: {
    ...mapMutations([
      'changeConfirmButtonLoading',
      'changeReset']),
    markSeats (e) {
      this.$emit('markSeats', e)
    },
    clearSeat () {
      this.changeReset(true)
      this.visible = false
      this.$emit('clearSeat')
    },
    confirm () {
      this.visible2 = false
      this.changeConfirmButtonLoading(true)
      this.$emit('confirm')
    }
  },
  created () {},
  mounted () {
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.contentScroll, {
          scrollbar: {
            fade: true,
            interactive: false
          },
          mouseWheel: {
            speed: 20,
            invert: false,
            easeTime: 300
          },
          scroll: true,
          click: true }
        )
      } else {
        this.scroll.refresh()
      }
    })
  }
}
</script>
<style scoped>
.pages {
  box-sizing: border-box;
  padding: 30px 20px;
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.pages .scroll {
  padding-top: 15px;
}
.pages .scroll .seat-demo {
  width: 20px;
  height: 20px;
  vertical-align: -65%;
}
.pages .scroll .seatButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  color: #409EFF;
  font-size: 12px;
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  border-radius: 5px;
  cursor: pointer;
}
.pages .scroll .seatButton .seatText {
  text-align: center;
  width: 100%;
}
</style>
